<template>
	<!-- 发票查询页面 -->
	<view class="dzfp">
		<view class="title">
			<text>发票查询</text>
			<text class="iconfont icon-sousuo" @click="searchPage"></text>
		</view>
		<view class="tabPage">
			<view :class="tabAction=='tabItem1'?'tabAction':''" @click="tabChange('item1')">
				<text>近一周</text>
			</view>
			<view :class="tabAction=='tabItem2'?'tabAction':''" @click="tabChange('item2')">
				<text>近一个月</text>
			</view>
			<view :class="tabAction=='tabItem3'?'tabAction':''" @click="tabChange('item3')">
				<text>更多查询</text>
			</view>
		</view>
		<view class="cxjg">查询结果共有<text class="jgzs">{{tableData.length}}</text>条，当前为第<text
				class="dqws">{{tableData.length!==0?currentIndex+1:0}}</text>条，可横向滑动显示
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" @change="wszmqh" :current="currentIndex">
				<swiper-item v-for="(item,index) in tableData" :key="index">
					<view class="fpdmhm">
						<view>发票代码：<text>{{item.fpdm}}</text></view>
						<view>发票号码：<text>{{item.fphm}}</text></view>
					</view>
					<view class="wsList">
						<uni-group class="dzfpItem">
							<view class="item">
								<view class="name">发票品目名称：</view>
								<view class="con">{{item.hwmc}}</view>
							</view>
							<view class="item">
								<view class="name">价税合计：</view>
								<view class="con">{{item.jshj}}</view>
							</view>
							<view class="item">
								<view class="name">承租方识别号：</view>
								<view class="con">{{item.nsrsbh}}</view>
							</view>
							<view class="item">
								<view class="name">承租方名称：</view>
								<view class="con">{{item.nsrmc}}</view>
							</view>
							<view class="item">
								<view class="name">房屋地址：</view>
								<view class="con">{{item.address}}元</view>
							</view>
							<view class="item">
								<view class="name">是否冲红：</view>
								<view class="con">{{item.sfch}}</view>
							</view>
							<view class="item">
								<view class="name">开票日期：</view>
								<view class="con">{{item.cjsj}}</view>
							</view>
							<view class="btn">
								<button type="primary" size="mini" @click="fpyjfs(item)">邮件发送</button>
								<button type="primary" size="mini" @click="fpyl(item)">预览图片</button>
							</view>
						</uni-group>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="fy" v-show="tableData.length!==0">
			<uni-pagination :total="pageData.total" :pageSize="1" :current="currentIndex+1" @change="fyChange"
				title="标题文字" prev-text="前一页" next-text="后一页" />
		</view>
		<yjfs :showMail="showMail" @closeMail="closeMail" @yjfs="yjfs" :sbId="this.sbId" :tip="'请填写邮箱地址进行发送'"></yjfs>
	</view>
</template>

<script>
	import yjfs from "@/components/yjfs.vue"
	import {
		getYstDzfp,
		sendYstDzfpEmail
	} from "@/utils/common-api.js"
	export default {
		data() {
			return {
				tabAction: "tabItem1",
				tableData: [],
				formData: {
					gfNsrmc: "",
					address: "",
					kpStart: "",
					kpEnd: "",
					gdSearchType: ""
				},
				currentIndex: 0, //当前页
				pageData: {
					total: 0,
				},
				showMail: false,
				yjfsData:{}, //缓存邮件发送数据
				sbId:""
			}
		},
		components: {
			yjfs
		},
		onLoad(e) {
			console.log(e)
			this.resetForm()
			// 首页进入
			if (Object.keys(e).length == 0) {
				var date = this.$commonCzwjs.date("", "stamp");
				// 获取近一周起止时间
				// let jyzDate = this.$commonCzwjs.getDateRange(date, 6, true)
				// this.formData.kpStart = jyzDate[0]
				// this.formData.kpEnd = jyzDate[1]
				this.formData.gdSearchType = "week"
				this.tabAction = "tabItem1"
				this.handleSearch()
				return
			}
			// 更多查询
			if (e.type == "wszmcx") {
				this.tabAction = "tabItem3"
				let data = JSON.parse(e.formData)
				this.formData = data
				this.handleSearch()
				return
			}
		},
		methods: {
			// 数据查询
			async handleSearch() {
				// console.log("数据查询", this.formData)
				let res = await getYstDzfp(this.formData)
				// console.log("接口", res)
				if (res.head.errorCode == "0") {
					this.tableData = res.body
					this.pageData.total = res.body.length
					this.currentIndex = 0
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
				this.pageData.total = this.tableData.length
				this.currentIndex = 0

			},
			// 跳转查询页面
			searchPage() {
				this.$commonCzwjs.goPage({
					url: "/pages/dzfp/dzfpcx"
				})
			},
			// 
			// 切换tab页 
			async tabChange(data) {
				if (data == 'item1' && this.tabAction != "tabItem1") {
					this.resetForm()
					this.tabAction = "tabItem1"
					var date = this.$commonCzwjs.date("", "stamp");
					// 获取近一周起止时间
					// let jyzDate = this.$commonCzwjs.getDateRange(date, 6, true)
					// this.formData.kpStart = jyzDate[0]
					// this.formData.kpEnd = jyzDate[1]
					this.formData.gdSearchType = "week"
					this.handleSearch()
				}
				if (data == 'item2' && this.tabAction != "tabItem2") {
					this.resetForm()
					this.tabAction = "tabItem2"
					var date = this.$commonCzwjs.date("", "stamp");
					// 获取近一个月起止时间
					// let jyzDate = this.$commonCzwjs.getDateRange(date, 30, true)
					// this.formData.kpStart = jyzDate[0]
					// this.formData.kpEnd = jyzDate[1]
					this.formData.gdSearchType = "month"
					this.handleSearch()
				}
				if (data == 'item3') {
					this.searchPage()
				}
			},

			// 完税证明切换iconic 
			wszmqh(e) {
				// console.log(e.detail)
				this.currentIndex = e.detail.current
			},
			// 分页切换
			fyChange(e) {
				this.currentIndex = e.current - 1
			},

			//重置表单
			resetForm() {
				this.formData = {
					gfNsrmc: "",
					address: "",
					kpStart: "",
					kpEnd: "",
					gdSearchType: ""
				}
			},
			// 图片保存
			fpyl(val) {
				uni.navigateTo({
					url: "/pages/dzfp/pdfzimg?data=" + JSON.stringify(val)
				})
			},
			// 显示邮件发送
			async fpyjfs(val) {
				this.showMail = true
				this.yjfsData=val
				this.sbId=val.sbId
			},
			// 隐藏邮件发送
			closeMail(val) {
				this.showMail = false
			},
			// 获取邮件信息
			async yjfs(val) {
				// console.log(val)
				let params={
					fpId:this.yjfsData.fpId,
					emailAddressList:val
				}
				let res = await sendYstDzfpEmail(params)
				if (res.head.errorCode == "0") {
				    this.closeMail()
					uni.showModal({
						title: '提示',
						content: '邮件发送成功',
						confirmColor: '#000000', //确定字体颜色
						showCancel: false, //没有取消按钮的弹框 
						buttonText: '确定',
						success: function(res) {}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '邮件发送失败，请重新发送',
						confirmColor: '#000000', //确定字体颜色
						showCancel: false, //没有取消按钮的弹框 
						buttonText: '确定',
						success: function(res) {}
					});
				}
			}
		}
	}
</script>

<style>
	.title {
		width: 100%;
		height: 80rpx;
		background: #3171d5;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}

	.title .iconfont {
		float: right;
		margin-right: 36rpx;
		font-size: 40rpx;
	}

	.tabPage {
		display: flex;
		height: 90rpx;
		font-size: 30rpx;
	}

	.tabPage>view {
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		flex: 1;
		background: #007aff57;
		color: #ffffff;
	}

	.tabPage .slTip {
		position: relative;
		bottom: 20rpx;
	}

	.tabPage .tabAction {
		color: black;
		background: #ffffff;
		font-weight: bold;
	}

	.cxjg {
		padding: 20rpx 20rpx 0 20rpx;
		font-weight: bold;
		font-size: 26rpx;
		text-align: center;
	}

	.cxjg .jgzs {
		color: #3171d5;
	}

	.cxjg .dqws {
		color: red;
	}

	.wsList,
	.fpdmhm {
		padding: 0 20rpx;
		box-sizing: border-box;
		width: 100%;
		font-weight: bold;
		font-size: 26rpx;
		color: black;
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}

	.dzfpItem {
		background: #ffffff;
		margin-top: 20rpx;
		border: 2rpx solid #e7e7e7;
	}

	::v-deep .uni-group .uni-group__content {
		padding: 0;
	}

	.uni-group__content {
		padding: 0;
	}

	.wsList .item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #66666640;
	}

	.wsList .item:last-child {
		border-bottom: 0rpx solid #66666640;
	}

	.wsList .item .name {
		width: 200rpx;
		text-align: right;
		margin-right: 10rpx;
		padding-left: 20rpx;
	}

	.wsList .item .con {
		text-align: left;
		width: calc(100% - 230rpx);
	}

	.wsList .btn {
		text-align: center;
		padding: 20rpx;
	}

	.wsList .btn uni-button {
		margin: 0 10rpx;
		background-color: #3171d5;
		height: 70rpx;
		line-height: 70rpx;
	}

	.uni-margin-wrap {
		min-height: 800rpx;
	}

	.swiper {
		min-height: 780rpx;
	}

	::v-deep uni-swiper .uni-swiper-dots-horizontal {
		white-space: pre-wrap !important;
		width: 90%;
	}

	::v-deep uni-swiper .uni-swiper-dots-horizontal .uni-swiper-dot {
		margin-top: 10rpx;
	}


	.fy {
		margin: 0 20rpx 0 20rpx;

	}

	::v-deep .uni-pagination__btn {
		background: #00000063;
		opacit: 1;
	}

	::v-deep .uni-pagination__child-btn {
		color: #ffffff;
	}

	.fpdmhm {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 0;
	}

	.fpdmhm>view {
		margin: 0 10rpx;
	}

	.fpdmhm text {
		color: red;
	}
</style>